<template>
  <div class="login_wrap">
     <div class="login_content">
        <h1>进思学校系统</h1>
        <el-form class="myform" ref="loginForm" 
        :model="formState" :rules="rules">
          <el-form-item prop="username">
            <el-input  v-model="formState.username"  :prefix-icon="User" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="formState.password"  :prefix-icon="Lock" placeholder="请输入密码"></el-input>
          </el-form-item>
           <el-form-item prop="code">
              <div class="code_wrap">
                 <el-input v-model="formState.code"  :prefix-icon="Apple" placeholder="请输入验证码"></el-input>
                 <img @click="getCode" :src="'data:image/png;base64,'+state.img" alt="">
              </div>
          </el-form-item>
           <el-form-item >
            <el-checkbox  label="记住密码"></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button @click="toLogin" style="width:500px;" type="success">登录</el-button>
          </el-form-item>
        </el-form> 
     </div>
  </div>
</template>
<script lang="ts" setup>
  import {getCodeImg,login} from '@/api/login'
  import {setToken} from '@/utils/auth'
  import {User,Lock,Apple} from "@element-plus/icons-vue";
  import {ref,reactive} from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import {useRouter } from 'vue-router'
  let router=useRouter();
   interface IState{
    img:string,//验证码图片
  }
  let state=reactive<IState>({
    img:"",//验证码图片
  })
  // 
  interface IFormState{
    username:string,
    password:string,
    code:string,
    uuid:string
  }
  // 登录接口需要的四个数据
  let formState=reactive<IFormState>({
    username:"",
    password:"",
    code:"",
    uuid:""
  })
  // 获取验证码
  const getCode=async ()=>{
    const res=await getCodeImg();
    console.log(res,"-----获取验证码-----")
    state.img=res.img; //渲染成图片的
    formState.uuid=res.uuid; //为登录接口准备的数据
  }

  getCode();


  // 表单的验证规则
  let rules:FormRules={
    username:[{required:true,message:"请输入用户名",trigger:"blur"}
    ],
    password:[{required:true,message:"请输入密码",trigger:"blur"}],
    code:[{required:true,message:"请输入验证码",trigger:"blur"}],
  }

// FormInstance 表单实例 的ts类型
 let loginForm=ref<FormInstance|null>(); // 获取表单实例

 let toLogin=async ()=>{
  // 表单验证方法
    loginForm.value?.validate(async (vali:boolean)=>{
       if(vali){
           let res=await login(formState);
           console.log(res,"登录接口返回的数据")
           setToken(res.token)//使用js-cookie 插件方法存储token
           router.push("/home")

       }
    })
  
 }

</script> 
<style lang="scss" scoped>
    .login_wrap{
      width: 100%;
      height:100vh;
      background:url("https://img2.baidu.com/it/u=3903660847,718333765&fm=253&fmt=auto&app=138&f=JPEG?w=1427&h=800") no-repeat;
      
      background-size:100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .login_content{
        width: 500px;
        height: 400px;
        background: white;
        h1{
          text-align:center;
          color: #333;
          line-height: 80px;
        }
        .myform{
          padding: 20px 40px;
          .code_wrap{
            display: flex;
            img{
              width: 200px;
              height: 50px;
            }

          }
        }
      }
    }
</style>